<template>
<div class="ly-tab" ref="lytab">
  <ly-tabbar>
    <div class="my-tab-item" v-for="(item, index) in items" :key="index">
      <ly-tab-item :item="item">
        <img v-if="item.tx" slot="icon" :src="item.tx">
        <span
          v-if="item.icon"
          slot="icon">
          <i :class="item.icon"></i>
        </span>
        <span>{{ item[labelKey] }}</span>
      </ly-tab-item>
      <div class="separ-item" v-if="index !== (items.length - 1)">
        <i class="iconfont icon-ellipsis1"></i>
      </div>
    </div>
  </ly-tabbar>
</div>
</template>

<script>
import LyTabbar from './tabbar'
import LyTabItem from './tab-item'

export default {
  name: 'LyTab',
  components: {
    LyTabbar,
    LyTabItem
  },
  props: {
    value: {
      type: Number,
      default: 0
    },
    items: {
      type: Array,
      default () {
        return []
      }
    },
    options: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      selectedId: this.value
    }
  },
  computed: {
    labelKey () {
      return this.options.labelKey || 'label'
    }
  },
  watch: {
    value (value) {
      this.selectedId = value
    },
    selectedId (value) {
      this.$emit('input', value)
      this.$emit('change', this.items[value], value)
    }
  }
}
</script>

<style>
.my-tab-item{
  display: flex;
  align-items: flex-start;
}
.separ-item{
  height: .68rem;
  line-height: .68rem;
  color: rgba(0, 0, 0, 0.43);
}
.separ-item .iconfont{
  font-size: .4rem;
}
</style>
